"use client";

import { useState,useEffect } from "react";
import { useRouter } from 'next/navigation';

// 动态导入 useRouter

export default function LoginModule() {
    const [username, setUsername] = useState("");
    const [error, setError] = useState(null);
    const [showLogin, setShowLogin] = useState(true);
    const router = useRouter();// 添加控制显示的状态
    const [showModal, setShowModal] = useState(false); // 控制模态弹窗显示

    const handleLogin = async () => {
        // e.preventDefault();

        if (username.trim() === "") {
            // @ts-ignore
            setError("请输入用户名");
            return;
        }
        // 登录成功后隐藏登录框
        // window.location.href = `http://localhost:3000/?userId=${encodeURIComponent(username)}&activityId=100301`;
        setShowLogin(false);
        // window.alert(`恭喜您登录成功，尊敬的${encodeURIComponent(username)}\n该项目为大营销平台 - 抽奖展示，该项目主要分为5个部分\n

        // 1.提前对奖品信息等进行提前预热装配，降低活动启动时对数据库压力（服务开机）。\n
        // 2.会员卡模块课显示用户所拥有的抽奖次数，每日用户可通过签到获得抽奖次数并点击刷新刷新抽奖次数。\n
        // 3.用户可根据管理员配置规则通过九宫格或轮盘进行抽奖。\n
        // 4.设置抽奖阶梯用以增强用户粘性，抽奖达到一定次数可解锁新奖品或根据规则提高高价值奖品出现概率（并设置相关兜底规则，如黑名单和熔断。\n
        // 5.用户可通过积分兑换商品或抽奖次数（回收积分功能）。`)
        setShowModal(true);


        // if (typeof window !== "undefined") {
        //     // 设置延时，确保UI隐藏后再跳转
        //     setTimeout(() => {
        //         // 使用 router.push() 进行跳转，并传递查询参数
        //         router.push(/?userId=${encodeURIComponent(username)}&activityId=100301);
        //     }, 300); // 让 UI 先隐藏登录框
        //     // window.location.reload();
        // }

        // 使用 router.push() 进行跳转，同时传递查询参数


        // router.push(http://localhost:3000/?userId=${encodeURIComponent(username)}&activityId=100301);

    };
    const handleConfirm = () => {
        setShowModal(false);
        window.location.href = `/?userId=${encodeURIComponent(username)}&activityId=100301`;
    };

    return (
        <div className="relative max-w-sm mx-auto bg-gradient-to-r from-blue-600 to-teal-600 rounded-xl shadow-xl overflow-hidden md:max-w-2xl mb-10">
            {showLogin && ( // 根据 showLogin 控制是否显示登录框
                <div className="bg-white p-8 shadow-lg rounded-lg w-96">
                    <h2 className="text-2xl font-bold text-center mb-6">用户登录</h2>
                    {error && <p className="text-red-500 text-center mb-4">{error}</p>}
                    <form onSubmit={handleLogin} className="flex flex-col space-y-4">
                        <input
                            type="text"
                            placeholder="请输入用户名"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            className="p-2 border rounded-md"
                        />
                        <button
                            type="submit"
                            className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
                        >
                            登录
                        </button>
                    </form>
                </div>
            )}
            {/* 自定义模态弹窗 */}
            {showModal && (
                <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
                    <div className="bg-white p-6 rounded-lg shadow-xl max-w-md relative z-100">
                        <h2 className="text-xl font-bold text-center text-gray-800 mb-4">
                            🎉 恭喜您登录成功，尊敬的 {username}！
                        </h2>
                        <p className="text-gray-600">
                            该项目为 <strong>大营销平台 - 抽奖展示</strong>，主要包含：
                        </p>
                        <ul className="list-disc list-inside text-sm text-gray-500 mt-2 space-y-1">


                            <li>提前对奖品信息等进行提前预热装配，降低活动启动时对数据库压力（服务开机）。</li>
                            <li>会员卡模块课显示用户所拥有的抽奖次数，每日用户可通过签到获得抽奖次数并点击刷新刷新抽奖次数。</li>
                            <li>用户可根据管理员配置规则通过九宫格或轮盘进行抽奖。</li>
                            <li>设置抽奖阶梯用以增强用户粘性，抽奖达到一定次数可解锁新奖品或根据规则提高高价值奖品出现概率（并设置相关兜底规则，如黑名单、熔断、奖品不足等情况）。</li>
                            <li>用户可通过积分兑换商品或抽奖次数（回收积分功能）。</li>

                        </ul>
                        <div className="mt-4 flex justify-center">
                            <button
                                className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition"
                                onClick={handleConfirm}
                            >
                                继续
                            </button>
                        </div>
                    </div>
                </div>

            )}
        </div>
    );
}